<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./login.css">
    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="../icontfont/demo.css">
    <link rel="stylesheet" href="../swiper-bundle.min.css">

</head>

<body>
    <!-- 头部 -->
    <header>
        <h1><img src="./img/logo/logo1.png" alt="" height="30px" style="margin-left: 50px;"></h1>
        <div class="center">
            <div class="top">
                <span><a href="../登录/denglu.html">你好，请登录</a></span>
                <span>|</span>
                <span><a href="../注册/zhuce.html">注册</a></span>
            </div>
            <div>
                <ul>
                    <li><a href="" id="gouwuche"><span class="iconfont icon-gouwuche"></span>购物车</a></li>
                    <li><a href="">我的李宁</a></li>
                    <li><a href="">客服</a></li>
                    <li><a href="">手机李宁</a></li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 导航 -->
    <nav>
        <img src="./img/logo/lining-logo.png" alt="" height="30px">
        <div class="center">
            <ul id="ul1">
                <li>
                    <span>所有分类</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>男子</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>女子</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>男童</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>女童</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>系列</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>韦德</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>中国李宁</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>反伍系列</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
                <li>
                    <span>更多品牌</span>
                    <ul class="subnav">
                        <li>篮球鞋</li>
                        <li>运动鞋</li>
                        <li>训练鞋</li>
                        <li>凉鞋</li>
                        <li>羽毛球鞋</li>
                        <li>跑步鞋</li>
                    </ul>
                </li>
            </ul>
            <div>
                <input type="text" placeholder="中国李宁" id='fangdajing'>
                <span class="iconfont icon-fangdajing"></span>
            </div>
        </div>

    </nav>
    <!-- 大图区 -->
    <div class="banner" id="ban">
        <div class="screen">
            <ul>
                <li><img src="./img/banner/1.jpg" alt="" width="1680px" height="800px"></li>
                <li><img src="./img/banner/2.jpg" alt="" width="1680px" height="800px"></li>
                <li><img src="./img/banner/3.jpg" alt="" width="1680px" height="800px"></li>
                <li><img src="./img/banner/4.jpg" alt="" width="1680px" height="800px"></li>
                <li><img src="./img/banner/5.jpg" alt="" width="1680px" height="800px"></li>
                <li><img src="./img/banner/6.jpg" alt="" width="1680px" height="800px"></li>
                <li><img src="./img/banner/1.jpg" alt="" width="1680px" height="800px"></li>

            </ul>
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <div id="arr"><span id="left" class="left">&lt;</span><span id="right" class="right">&gt;</span></div>
    </div>
    <main>
        <!-- 尖货发售 -->
        <section>
            <div class="center">
                <span class="se1">尖货发售</span>
                <span class="se2">滑动查看更多></span>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo1.webp" alt="" width="400px"> </div>
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo2.webp" alt="" width="400px"> </div>
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo3.webp" alt="" width="400px"> </div>
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo4.webp" alt="" width="400px"> </div>
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo5.webp" alt="" width="400px"> </div>
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo6.webp" alt="" width="400px"> </div>
                        <div class="swiper-slide"><img src="./img/jianhuo/jianhuo1.webp" alt="" width="400px"> </div>

                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </section>

        <!-- 店铺热搜 -->
        <article>
            <img src="./img/yundong1.webp" alt="" width="1680px" style="margin-bottom: 100px;">
            <div class="center">
                <div id="inner">
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>

                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                    <div class="shangpin">
                        <img src="./img/yundong2.webp" alt="" width="200px">
                        <p>【DANSKIN】女子长款连帽羽绒服高度保暖鹅绒填充KYMQ008-2</p>
                        <p>￥2180</p>
                    </div>
                </div>
            </div>
        </article>

    </main>
    <!-- 尾部 -->
    <footer>

        <p>获取帮助</p>
        <p>防伪查询</p>
        <p>售后服务</p>
        <p>校园代理</p>

    </footer>
</body>

</html>
<script src="../jquery/jquery.min.js"></script>
<script src="../swiper-bundle.min.js"></script>
<script>
    //导航区
    $('#ul1>li>span').on('click', function () {
        $(this).next().stop().slideToggle()
        $(this).parent().siblings().children('ul').stop().slideUp()
        $(this).parent().toggleClass('active').siblings('li').removeClass('active')
    })

    //大图区
    let timer = null;
    let index = 0;
    //左右箭头显示和隐藏
    $('#ban').hover(function () {
        $('#arr').show(500)
        clearInterval(timer)
    }, function () {
        $('#arr').hide(500)
        autoplay()
    })
    //点击右箭头
    $('#right').on('click', function () {
        if (index == 6) {
            index = 0;
            $('ul').css('left', '0')
        }
        index++;
        $('#ban ul').stop().animate({ "left": -index * $(".screen").width() })
        changeColor();
    })
    //点击左箭头
    $('#left').on('click', function () {
        if (index == 0) {
            index = 6;
            $('ul').css('left', -10080 + 'px')
        }
        index--;
        $('#ban ul').stop().animate({ "left": -index * $(".screen").width() })
        changeColor()
    })
    //事件委托点击小点
    $('#ban').on('click', "ol>li", function () {
        $(this).addClass("current").siblings('li').removeClass("current")
        index = $(this).index()
        $("#ban ul").stop().animate({ "left": -index * $(".screen").width() })
    })
    //更改小点的颜色
    function changeColor() {
        if (index == 6) {
            current;
        } else {
            $("ol>li").eq(index).addClass("current").siblings("li").removeClass("current")
        }
    }
    autoplay();
    function autoplay() {
        clearInterval(timer)
        timer = setInterval(function () {
            $('#right').triggerHandler("click");
        }, 2000)
    }

    //尖货区

    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

</script>